<div class="testContent">
    <h1>About the Jx.Grid test page</h1>
    <p>This test page demonstrates some basic and advanced ways of using Jx.Grid.  The Jx.Grid control is designed to help you present tabular data in a visually appealing and functional way.  Tabular data is normally displayed in an HTML table.  Jx.Grid uses HTML tables for its basic structure, but avoids some of the limitations of just using a regular HTML table:</p>
    <ul>
        <li>Optional row headers and column headers.</li>
        <li>Scrolling row and column headers that stay in the view.</li>
        <li>Fit nicely into other JxLib components such as dialogs and panels</li>
        <li>Support for dynamically loading data through customizable data models</li>
        <li>Customizable prelighting and selection of rows, columns and cells.</li>
    </ul>
    <p>This example includes some menus that allow you to turn on and off some of the configurable options of a Jx.Grid, including:</p>
    <ul>
        <li>Row Options:
            <ul>
                <li>Row Prelighting - turns on a hover effect for the entire row when the mouse is hovered over a row</li>
                <li>Row Header Prelighting - turns on a hover effect for only the row header when the mouse is hovered over a row</li>
                <li>Row Selection - makes a row selectable by the user when clicking on the row header or any cell in the row</li>
            </ul>
        </li>
        <li>Column Options:
            <ul>
                <li>Column Prelighting - turns on a hover effect for the entire column when the mouse is hovered over a column</li>
                <li>Column Header Prelighting - turns on a hover effect for only the column header when the mouse is hovered over a column</li>
                <li>Column Selection - makes a column selectable by the user when clicking on the column header or any cell in the column</li>
            </ul>
        </li>
        <li>Cell Options:
            <ul>
                <li>Cell Prelighting - turns on a hover effect for the cell when the mouse is hovered over a cell</li>
                <li>Cell Selection - makes a cell selectable by the user when clicking on the cell</li>
            </ul>
        </li>
        <li>Editor Options:
          <ul>
            <li>Enable - turn the editor on or off</li>
            <li>Close on Blur - set to false to disable it or an integer to set the time in miliseconds</li>
            <li>Field Validation - Enable a custom validator for every column if needed.
              Uses Jx.Plugin.Field.Validator which implements the Mootools Field Validator</li>
            <li>Field Formatted - turn on to show the value inside the editor the same way it is displayed in the grid.
              Turn off to show the value the way it came with the model. Can be enabled separately for every column by adding a boolean 'fieldFormatted' option to the option of the column. Example shows this for column 'website'</li>
            <li>Keyboard Support - allows the user to control through the grid with some commands: 
              [Arrow-Up/Down],[Tab],[Shift+Tab],[Enter],[Esc],[Ctrl+Enter],[Ctrl+Shift+Enter],[Ctrl+Up/Down/Left/Right]</li>
            <li>PopUp Options - use - switch between a regular input field and a little popup with optional customizable buttons and label</li>
            <li>PopUp Options - useButtons - enable/disable buttons in a popup</li>
            <li>PopUp Options - buttons.submit/cancel - Jx.Button options for the submit/cancel button</li>
            <li>PopUp Options - useLabel - shows the title of the column above the input field inside the popup</li>
            <li>linkClickListener - enables a 'click protection' for links that are formatted with Jx.Formatter.Uri to be able to click anywhere inside a cell
              to show the *only* editor instead of showing the editor and open the link</li>
          </ul>
    </ul>
</div>